<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :lock-scroll="false"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    class="subcribe-common-dialog small-common-dialog-size mobile-el-dialog-form"
  >
    <DialogTitle :title="isEdit ? '编辑文件夹' : '添加文件夹'" font-size="16px" style="margin-bottom:20px;"/>
    <el-form
      ref="storeFolderForm"
      :model="formData"
      :rules="rules"
      label-width="96px"
      class="lineHeight32 mb0 form-content"
      label-position="right">
      <el-form-item label="文件夹名称" prop="fileName" class="fileName">
        <el-input v-model="formData.fileName" :maxlength="18" clearable size="small" placeholder="不超过18字符" />
      </el-form-item>
      <el-form-item label="说明" prop="fileDesc" class="fileName">
        <el-input
          :rows="3"
          v-model="formData.fileDesc"
          resize="none"
          class="file-desc-textarea"
          type="textarea"
          maxlength="200"
          placeholder="说明将会展示于文件列表，限制200字符"/>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button :disabled="!formData.fileName" class="ok" type="primary" @click="handleConfirm">{{ isEdit ? '保存' : '确定' }}</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
export default {
  name: 'StoreFolder',
  components: {
    DialogTitle
  },
  model: {
    prop: 'folderData',
    event: 'change'
  },
  props: {
    folderData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      modalMaskDom: null
    };
  },
  computed: {
    formData: {
      get() {
        return this.folderData;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    rules() {
      return {
        'fileName': [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }]
      };
    }
  },
  methods: {
    handleDialogClose() {
      this.$refs['storeFolderForm'].resetFields();
      this.$emit('handleCancel');
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.$refs['storeFolderForm'].validate(valid => {
        if (valid) {
          this.isEdit ? this.$emit('handleFolderEdit') : this.$emit('handleFolderCreate');
          this.handleDialogClose();
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form-content {
  & ::v-deep {
    .el-input__inner, .el-textarea__inner {
      &::-webkit-input-placeholder { /* WebKit browsers */
        color: #ddd;
        font-size: 14px;
      }
      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #ddd;
        font-size: 14px;
      }
      &:-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #ddd;
        font-size: 14px;
      }
    }
  }
  .file-desc-textarea {
    ::v-deep textarea {
      padding-right: 5px;
      text-align: justify;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .ok {
    width: 120px;
    font-size: 16px;
    padding: 8px 20px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 20px;
    margin-left: 16px !important;
  }
}
::v-deep .el-form-item__content {
  width: 240px;
  margin-left: 0 !important;
  .el-input__suffix {
    display: flex;
    align-items: center;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 240px;
    font-size: 14px;
  }
}
::v-deep .el-form-item {
  display: flex;
  justify-content: center;
}
.mobile-el-dialog-form {
  .fileName {
    ::v-deep {
      .el-form-item__label {
        flex-shrink: 0;
      }
    }
  }
}
</style>
